<template>
  <el-tabs
    v-model="activeName"
    class="demo-tabs"
    @tab-change="handleClick"
  >
    <el-tab-pane
      v-for="(tab, index) of tabList"
      :key="index"
      :name="tab.id"
    >
      <template #label>
        <section class="label-wrap">
          <h1 class="title">
            {{ tab.name }}
          </h1>
          <section class="conversion-rate-wrap">
            <section class="rate-wrap__left">
              <p class="rate__label">
                转化率
              </p>
              <p class="rate__value">
                {{ tab.rate }}%
              </p>
            </section>
            <gauge-chart :data="tab.rate" />
          </section>
        </section>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

import GaugeChart from './gauge-chart.vue';

export default defineComponent({
  name: 'TabList',
  components: {
    GaugeChart,
  },
  emits: ['tabChange'],
  setup(props, { emit }) {
    const activeName = ref('store1');

    const handleTabChange:Func = (tab: string) => {
      emit('tabChange', tab);
    };

    return {
      tabList: [
        {
          id: 'store1',
          name: '门店1',
          rate: 90,
        },
        {
          id: 'store2',
          name: '门店2',
          rate: 30,
        },
        {
          id: 'store3',
          name: '门店3',
          rate: 50,
        },
        {
          id: 'store4',
          name: '门店4',
          rate: 20,
        },
        {
          id: 'store5',
          name: '门店5',
          rate: 70,
        },
        {
          id: 'store6',
          name: '门店6',
          rate: 80,
        },
        {
          id: 'store7',
          name: '门店7',
          rate: 40,
        },
        {
          id: 'store8',
          name: '门店8',
          rate: 60,
        },
        {
          id: 'store9',
          name: '门店9',
          rate: 40,
        }
      ],
      activeName,
      handleClick: handleTabChange,
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.#{$namespace}-tabs__nav-wrap) {
  padding: 0 32px;

  .#{$namespace}-tabs__nav-prev,
  .#{$namespace}-tabs__nav-next {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .#{$namespace}-tabs__nav-prev {
    margin-left: 12px;
  }

  .#{$namespace}-tabs__nav-next {
    margin-right: 12px;
  }
}

:deep(.#{$namespace}-tabs__item) {
  height: auto;
  line-height: normal;
}

.label-wrap {
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;

  .title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
  }

  .conversion-rate-wrap {
    display: flex;

    .rate-wrap__left {
      margin-right: 12px;

      .rate__label {
        font-size: 12px;
        line-height: 22px;
      }

      .rate__value {
        font-size: 22px;
        font-weight: 600;
        line-height: 28px;
      }
    }
  }
}

</style>
